<template>
  <!-- <h1>专技人才迁入主要内容</h1> -->
  <div class="shenheshauxin">
    <div class="sousuokuang">
      <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
        <el-input v-model="sizeForm.name" placeholder="专技人员名称"></el-input>
        <el-input v-model="sizeForm.num" placeholder="身份证号码"></el-input>
        <el-select v-model="sizeForm.region1" placeholder="性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
        <el-select v-model="sizeForm.region2" placeholder="申报专技系列">
          <el-option label="社会人员" value="社会人员"></el-option>
          <el-option label="教师" value="教师"></el-option>
          <el-option label="学生" value="学生"></el-option>
        </el-select>
        <el-select v-model="sizeForm.region3" placeholder="资格专业">
          <el-option label="语文" value="语文"></el-option>
          <el-option label="数学" value="数学"></el-option>
          <el-option label="英语" value="英语"></el-option>
          <el-option label="社会工作者" value="社会工作者"></el-option>
        </el-select>
        <el-input
          v-model="sizeForm.QualificationName"
          placeholder="专技资格名称"
        ></el-input>
        <el-select v-model="sizeForm.region4" placeholder="申报专技级别">
          <el-option label="初级" value="初级"></el-option>
          <el-option label="中级" value="中级"></el-option>
          <el-option label="高级" value="高级"></el-option>
        </el-select>
        <div
          class="block"
          style="width: 200px; display: inline-block; text-align: center"
        >
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="最小出生日期"
          >
          </el-date-picker>
        </div>
        <div
          class="block"
          style="width: 200px; display: inline-block; text-align: center"
        >
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="最大出生日期"
          >
          </el-date-picker>
        </div>
        <el-form-item size="large">
          <el-button type="primary" @click="onquery">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="xianshi">
      <div style="margin: 5px 5px">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column prop="sponsornum" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="sponsortime" label="人员信息">
          </el-table-column>
          <el-table-column prop="sponsorsex" label="性别" width="50">
          </el-table-column>
          <el-table-column prop="sponsorseries" label="所在单位">
          </el-table-column>
          <el-table-column prop="sponsorspecialized" label="专业技术系列">
          </el-table-column>
          <el-table-column prop="sponsorsname" label="资格专业">
          </el-table-column>
          <el-table-column prop="sponsorsname" label="专业技术资格名称">
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template>
              <el-button type="text" size="medium" @click="see">查看</el-button>
              <el-button type="text" size="medium" @click="out">迁出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
    <div v-show="this.$store.state.hhs.isShow" id="see">
      <seeText />
    </div>
  </div>
</template>


<script>
import seeText from "./See.vue";
export default {
  data() {
    return {
      activeName: "first",
      sizeForm: {
        activity: "",
        name: "",
        num: "",
        region3: "",
        region1: "",
        region2: "",
        QualificationName: "",
        ProfessionalQualification: "",
        activity1: "",
        name1: "",
        num1: "",
        region4: "",
        region5: "",
        region6: "",
        QualificationName1: "",
        ProfessionalQualification1: "",
      },
      value1: "",
      value2: "",
      tableData: [
        {
          sponsornum: "1",
          sponsortime: "2016-05-02",
          sponsorinformation: "王小虎",
          sponsorsex: "男",
          sponsorinformation: "上海市普陀区金沙江路 1518 弄",
          sponsorseries: "社会工作者",
          sponsorspecialized: "社会学",
          sponsorsname: "助理社会工程师",
          sponsortype: "审核中",
        },
        {
          sponsornum: "1",
          sponsortime: "2016-05-02",
          sponsorinformation: "王小虎",
          sponsorsex: "男",
          sponsorinformation: "上海市普陀区金沙江路 1518 弄",
          sponsorseries: "社会工作者",
          sponsorspecialized: "社会学",
          sponsorsname: "助理社会工程师",
          sponsortype: "审核中",
        },
        {
          sponsornum: "1",
          sponsortime: "2016-05-02",
          sponsorinformation: "王小虎",
          sponsorsex: "男",
          sponsorinformation: "上海市普陀区金沙江路 1518 弄",
          sponsorseries: "社会工作者",
          sponsorspecialized: "社会学",
          sponsorsname: "助理社会工程师",
          sponsortype: "审核中",
        },
        {
          sponsornum: "1",
          sponsortime: "2016-05-02",
          sponsorinformation: "王小虎",
          sponsorsex: "男",
          sponsorinformation: "上海市普陀区金沙江路 1518 弄",
          sponsorseries: "社会工作者",
          sponsorspecialized: "社会学",
          sponsorsname: "助理社会工程师",
          sponsortype: "审核中",
        },
      ],
    };
  },
  components: {
    seeText,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onquery() {
      console.log("正在查询!");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }, 
    see(){
      this.$store.commit('changeIsShow')
  },
    // see() {
    //   if (this.isShow == false) {
    //     this.isShow = true;
    //   } else {
    //     this.isShow = false;
    //   }
    // },
    out() {
      this.$router.push("/TalentManagement/TalentmangerOut");
    },
  },
  mounted(){
    sessionStorage.setItem('fName','Talentmanger2')
  }
};
</script>

<style lang="less" scoped>
//  将 dangerouslyUseHTMLString属性设置为 true， message就会被当作 HTML 片段处理，就可使用</br>进行换行
* {
  padding: 0;
  margin: 0;
}
.el-pagination {
  text-align: center;
}
.el-form-item {
  float: right;
  margin: 5px 10px;
  height: 40px;
}
.el-button {
  width: 60px;
  height: 28px;
  font: size 28px;
}
.el-select {
  margin: 8px 18px 8px;
  text-align: left;
}
.el-input {
  width: 150px;
  height: 30px;
  margin: 8px 18px 8px;
  text-align: left;
}
body,
html,
#app,
el-aside {
  height: 100%;
}
.InternalNavigation {
  margin: 0px;
  width: 100%;
  height: 50px;
  background-color: rgba(242, 242, 242, 1);
}
.xianshi {
  margin: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(242, 242, 242, 1);
}
.shenheshauxin {
  height: 100%;
  width: 100%;
  position: relative;
}
#see {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top: -250px;
}
.sousuokuang {
  width: 100%;
  height: 126px;
  background-color: rgba(242, 242, 242, 0.5);
}
.el-container,
.el-menu {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  line-height: 20px;
  margin: 5px 20px 5px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>